<template>
    <div class="login_container">
        <!-- <el-form></el-form> -->
        <div class="login_box">
                <!-- 头像 -->
                <el-avatar :size='130'
                    src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.qqtouxiang8.net%2Fuploads%2Fallimg%2F180914%2F1-1P9141206240-L.jpeg&refer=http%3A%2F%2Fimg.qqtouxiang8.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640920844&t=53445d1d5ef7ddf669e595250a24b9a1'
                    fit='fill'
                >
                </el-avatar>
                <!-- 表单区域-->
                <el-form
                    ref='loginFormRef'
                    label-width="80px"
                    class="login_form"
                    :model='loginForm'
                    :rules="loginRules"
                >
                    <!-- 用户名 -->
                    <el-form-item 
                        label="账号"
                        prop='username'
                    >
                        <el-input
                            prefix-icon="el-icon-user"
                            v-model='loginForm.username'
                        >
                        </el-input>
                    </el-form-item>

                    <!-- 密码  -->
                    <el-form-item 
                        label="密码"
                        prop="password"
                    >
                       <el-input
                       prefix-icon="el-icon-lock"
                        placeholder="请输入密码"
                        show-password
                        v-model='loginForm.password'
                       >
                       </el-input>
                    </el-form-item>

                    <!-- 按钮 -->
                    <el-form-item class='btns'>
                        <el-button type="primary" @click="login">登录</el-button>
                        <el-button type="info" @click="resetLoginForm">重置</el-button>
                    </el-form-item>
                </el-form>

        </div>
    </div>
</template>

<script>
// import axios from 'axios'
export default {
    name:'Login',
    data(){
        return {
            // 登录表单的数据绑定对象
            loginForm:{
                username:'',
                password:''
            },
            // 表单的验证规则对象
            loginRules:{
                // 验证用户名是否合法
                username:[
                    {
                        required:true,
                        message:'请输入用户名',
                        trigger:'blur'
                    },
                    {
                        min: 3,
                        max: 10,
                        message:'用户名长度在3到10个字符',
                        trigger:'blur'
                    }
                ],
                // 验证密码是否合法
                password:[
                    {
                        required:true,
                        message:'请输入密码',
                        trigger:'blur'
                    },
                    {
                        min: 6,
                        max: 16,
                        message:'密码长度在6到16个字符',
                        trigger:'blur'
                    }
                ]

            }
        }
    },
    methods:{
        
        login(){
            // valid 布尔值，表单验证通过则返回true
            // validate 对整个表单进行校验的方法，参数为一个回调函数
            // async和await结合使用可以简化promise操作
            this.$refs.loginFormRef.validate(async(valid)=>{
                if(valid) {
                    // 发送请求，解构赋值获取data对象，重命名为res
                    const {data :res} = await this.$http.post('login',this.loginForm)
                    console.log(res)
                    if(res.meta.status !== 200){
                        // 失败提示框
                        return this.$message.error(`${res.meta.msg}`)
                    }
                    // 成功提示框
                    this.$message.success(`${res.meta.msg}`)
                    // 将token存入sessionStorage
                    window.sessionStorage.setItem('token',res.data.token)
                    // 登录跳转
                    this.$router.push('/home')
                }
            })
        },
        // 点击重置按钮，充值登录表单
        resetLoginForm(){
            this.$refs.loginFormRef.resetFields()
        }
    }
}
</script>

<style lang='less' scoped>
    .login_container {
        height: 100%;
        background:url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F7f6085956ab4fc619ec60e258002743e20cccf8f.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640923336&t=ec8da8dfaed2be6be6c640d8b4c05aaf);
    }
    .login_box {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 450px;
        height: 300px;
        transform: translate(-50%,-50%);
        background-color: #fff;
        border-radius: 15px;
        .el-avatar {
        position: absolute;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    }
    .login_form {
        position: absolute;
        bottom: 10px;
        width: 100%;
        padding-right: 40px;
        box-sizing: border-box;

    }
    .btns {
        display: flex;
        /* justify-content --- 对齐方式 */
        /* 从行尾开始排列 */
        justify-content: flex-end;
    }

</style>